@lobehub/chat/src/app/[variants]/(main)/settings/hooks/useSyncSettings.ts

Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.

import { FormInstance } from 'antd/es/form/hooks/useForm';
import { useLayoutEffect } from 'react';

import { useUserStore } from '@/store/user';

export const useSyncSettings = (form: FormInstance) => {
  useLayoutEffect(() => {
    // set the first time
    form.setFieldsValue(useUserStore.getState().settings);

    // sync with later updated settings
    const unsubscribe = useUserStore.subscribe(
      (s) => s.settings,
      (settings) => {
        form.setFieldsValue(settings);
      },
    );

    return () => {
      unsubscribe();
    };
  }, []);
};